<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getFoodDetail, addShopCar } from '@/api/shop'
	import { addCollect, removeCollet } from '@/api/user'
	import { useUserStore } from '@/store/user'
	
	const user = useUserStore()
	const loading = ref(false)
	const oprateloading = ref(false)
	const curSwiper = ref(0)
	const form = ref({
		goodsId: '',
		goodsName: '',
		specifics: '',
		price: 0,
		num: 0,
		minNum: 0,
		maxNum: 999,
		isCollect: 0,
		images: []
	})
	const parseStyle = ref({
		img: 'max-width: 702rpx'
	})
	
	function swiperChange(e) {
		curSwiper.value = e.detail.current
	}
	function getData(id) {
		loading.value = true
		getFoodDetail({goodsId: id, areaId: user.addressIds[2]}).then(res => {
			let result = res.result || {images: []}
			form.value = result
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function goHome() {
		uni.switchTab({url: '/pages/tabbar/index'})
	}
	function goCar() {
		uni.switchTab({url: '/pages/tabbar/shop'})
	}
	function goCollect() {
		if(loading.value || oprateloading.value) return
		oprateloading.value = true
		if(!form.value.isCollect) {
			addCollect({goodsId: form.value.goodsId, areaId: user.addressIds[2]}).then(res => {
				oprateloading.value = false
				uni.showToast({icon: 'success', title: '收藏成功'})
				form.value.isCollect = 1
			}).catch(() => oprateloading.value = false)
		} else {
			removeCollet([form.value.goodsId]).then(res => {
				oprateloading.value = false
				uni.showToast({icon: 'success', title: '取消成功'})
				form.value.isCollect = 0
			}).catch(() => oprateloading.value = false)
		}
	}
	function addCar() {
		if(loading.value || oprateloading.value) return
		oprateloading.value = true
		let data = {
			goodsId: form.value.goodsId,
			type: 'INGREDIENT',
			num: 1
		}
		addShopCar(data).then(res => {
			uni.showToast({icon: 'success', title: '添加成功'})
			user.shopCarAction(false)
			oprateloading.value = false
		}).catch(() => oprateloading.value = false)
	}
	function goBuy() {
		if(loading.value || oprateloading.value) return
		oprateloading.value = true
		let data = {
			total: form.value.price,
			list: [{
				id: form.value.goodsId,
				name: form.value.goodsName,
				furl: form.value.images && form.value.images[0] && form.value.images[0].furl || '',
				price: form.value.price,
				number: 1,
				type: 'INGREDIENT'
			}]
		}
		uni.navigateTo({
			url: '/pages/shop/orderConfirm',
			success: res => {
				res.eventChannel.emit('orderConfirm', data)
			}
		})
		oprateloading.value = false
	}
	
	onLoad((option) => {
		let title = '详情'
		if(option.title) {
			title = option.title
		}
		uni.setNavigationBarTitle({
			title
		})
		if(option.id) getData(option.id)
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content">
			<view class="goods-swiper">
				<swiper class="img-box" circular autoplay @change="swiperChange">
					<swiper-item v-for="(file, index) in form.images" :key="index"><uv-image :src="file.furl" width="100%" height="100%"></uv-image></swiper-item>
				</swiper>
				<view class="dot-box">{{form.images.length? curSwiper + 1 : 0}} / {{form.images.length}}</view>
			</view>
			<view class="goods-info">
				<uv-skeletons :loading="loading" :skeleton="[{ type: 'line', num: 3, gap: '24rpx', style: ['height: 50rpx;', 'height: 44rpx;', 'width: 375rpx;']}]">
					<view class="goods-name">{{form.goodsName || '--'}}<text v-if="form.specs">/{{form.specs}}</text></view>
					<view class="goods-des">{{form.remark || '--'}}</view>
					<view class="goods-price">
						<text class="text-price">{{form.price? form.price.toFixed(2) : 0.00}}</text>
						<text class="text-original" v-if="form.linePrice">¥{{form.linePrice}}</text>
					</view>
					<view class="goods-tags">
						<view class="tag-item" v-if="form.minNum >= 0">
							<uv-icon name="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-17/1739780685155_detail-icon.png"
								size="32"></uv-icon>
							<text>{{form.minNum || 1}}件起送</text>
						</view>
					</view>
				</uv-skeletons>
			</view>
			<view class="goods-detail">
				<view class="detail-title">商品详情</view>
				<uv-skeletons :loading="loading" :skeleton="[{ type: 'line', num: 1, gap: '24rpx', style: ['height: 400rpx']}]">
					<uv-parse :content="form.specifics" :tagStyle="parseStyle"></uv-parse>
				</uv-skeletons>
			</view>
		</view>
		<view class="app-bottom">
			<shopBar mode="collect" :carNum="user.shopCar.length" :totalPrice="form.price" :loading="oprateloading" :collect="form.isCollect == 1" @home="goHome" 
				@car="goCar" @collect="goCollect" @add="addCar" @buy="goBuy" :buyDisabled="form.price < 1000"></shopBar>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-bottom: 112rpx;
		.app-content{
			.goods-swiper{
				width: 100%;
				position: relative;
				.img-box {
					width: 100%;
					height: 750rpx;
				}
				.dot-box {
					position: absolute;
					right: 24rpx;
					bottom: 24rpx;
					padding: 8rpx 24rpx;
					background-color:  rgba(0,0,0,0.7);
					border-radius: 30rpx;
					color: #ffffff;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
			}
			.goods-info{
				margin-top: 24rpx;
				padding: 24rpx;
				background-color: #ffffff;
				border-radius: 12rpx;
				.goods-name{
					font-weight: 600;
					font-size: 36rpx;
					line-height: 42rpx;
				}
				.goods-des{
					margin-top: 16rpx;
					color: #767473;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
				.goods-price{
					margin-top: 24rpx;
					.text-price{
						color: #FF0D0D;
						font-weight: 600;
						font-size: 52rpx;
						&::before{
							content: "¥";
							font-size: 60%;
						}
					}
					.text-original{
						margin-left: 16rpx;
						font-size: 32rpx;
						color: #999999;
						text-decoration-line: line-through;
					}
				}
				.goods-tags{
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					.tag-item{
						height: 52rpx;
						border-radius: 4rpx;
						padding: 8rpx;
						background-color: #FFF4F2;
						display: flex;
						align-items: center;
						gap: 8rpx;
						color: #FD1024;
						font-weight: 600;
					}
				}
			}
			.goods-detail{
				margin-top: 24rpx;
				padding: 24rpx;
				background-color: #ffffff;
				border-radius: 12rpx;
				.detail-title{
					margin-bottom: 16rpx;
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
			}
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 10;
			height: 112rpx;
		}
	}
</style>